<template>
  <el-card shadow="never">
    <template #header>
      <CardTitle title="快捷入口" />
    </template>
    <div class="flex flex-row flex-wrap gap-8 p-4">
      <div
        v-for="menu in menuList"
        :key="menu.name"
        class="h-20 w-20% flex flex-col cursor-pointer items-center justify-center gap-2"
        @click="handleMenuClick(menu.routerName)"
      >
        <div :class="menu.bgColor" class="rounded p-3 text-white">
          <Icon :icon="menu.icon" class="text-7.5!" />
        </div>
        <span>{{ menu.name }}</span>
      </div>
    </div>
  </el-card>
</template>
<script lang="ts" setup>
/** 快捷入口卡片 */
import { CardTitle } from '@/components/Card'

defineOptions({ name: 'ShortcutCard' })

const router = useRouter() // 路由

/** 菜单列表 */
const menuList = [
  {
    name: '房租订单',
    icon: 'ep:chat-dot-square',
    bgColor: 'bg-red-400',
    routerName: 'archives/rent-bill'
  },
  {
    name: '电费订单',
    icon: 'fa:cart-plus',
    bgColor: 'bg-red-400',
    routerName: 'meter/pay-elec-charge'
  },
  {
    name: '水费订单',
    icon: 'ep:bowl',
    bgColor: 'bg-yellow-400',
    routerName: 'water/water-pay-order'
  },
  {
    name: '宽带订单',
    icon: 'fa:cart-plus',
    bgColor: 'bg-green-400',
    routerName: 'net/net-pay-order'
  },
  {
    name: '房产管理',
    icon: 'fa:windows',
    bgColor: 'bg-yellow-500',
    routerName: 'space/house-room'
  },
  {
    name: '集中器管理',
    icon: 'fa:align-justify',
    bgColor: 'bg-green-600',
    routerName: 'meter/meter-serial-server'
  },
  {
    name: '电表管理',
    icon: 'fa:battery-3',
    bgColor: 'bg-cyan-500',
    routerName: 'meter/meter'
  },
  {
    name: '水表管理',
    icon: 'fa:birthday-cake',
    bgColor: 'bg-cyan-500',
    routerName: 'water/water'
  },
  {
    name: '银联账户',
    icon: 'fa:cny',
    bgColor: 'bg-purple-500',
    routerName: 'account/own-meter-config'
  },
  {
    name: '租客管理',
    icon: 'fa:drivers-license-o',
    bgColor: 'bg-rose-500',
    routerName: 'archives/room-rent'
  },
  {
    name: '合同管理',
    icon: 'ep:avatar',
    bgColor: 'bg-purple-500',
    routerName: 'archives/rent-contract'
  },
  {
    name: '宽带账号',
    icon: 'fa:user',
    bgColor: 'bg-cyan-400',
    routerName: 'net/net-account-config'
  },

  {
    name: '地址授权',
    icon: 'fa:chrome',
    bgColor: 'bg-blue-500',
    routerName: 'space/auth-addr'
  },
  {
    name: '电表告警',
    icon: 'fa:chrome',
    bgColor: 'bg-blue-500',
    routerName: 'meter/device-warn'
  },
  {   
    name: '短信发送',
    icon: 'fa:comment-o', 
    bgColor: 'bg-red-400', 
    routerName: 'archives/huaxing-sms' 
  },
]

/**
 * 跳转到菜单对应页面
 *
 * @param routerName 路由页面组件的名称
 */
const handleMenuClick = (routerName: string) => {
  router.push(routerName)
}
</script>
